import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'

import { connect } from '@tarojs/redux'
import actions from '../../store/actions'

const { getPlay } = actions

@connect(({ getPlayData }) => ({
  getPlayData
}))
class Play extends Component {
  constructor(props) {
    super(props)
    this.state = {
      firstData: {}
    }
  }

  config = {
    navigationBarTitleText: '播放页'
  }

  componentDidMount() {
    const { dispatch } = this.props
    const {
      params: { id, pid }
    } = this.$router
    dispatch(
      getPlay({
        id,
        pid
      })
    ).then(data => {
      console.log(data)
      const { subTitle, title } = data.data
      Taro.getEnv() === 'WEB' ? (document.title = `${title} ${subTitle}`) : Taro.setNavigationBarTitle({ title: `${title} ${subTitle}` })
    })
  }

  render() {
    const {
      getPlayData: { data = {} }
    } = this.props
    const { list = [], subTitle, title } = data
    return (
      <View>
        <View>
          <Text>{subTitle}</Text>
          <Text>{title}</Text>
        </View>
        {list.map(item => (
          <View key={item.playName}>
            <Text>
              {item.playTitle} {item.playName} {item.title} {item.vid}
            </Text>
          </View>
        ))}
      </View>
    )
  }
}

export default Play
